<template>
  <div :class="['coupon', 'coupon-' + size]">
    <text :class="['coupon-y', 'coupon-y-' + size]">券</text>
    <text :class="['coupon-val', 'coupon-val-' + size]"> ¥{{couponValue}}</text>
    <div :class="['coupon-dot-left', 'coupon-dot-left-' + size]"></div>
    <div :class="['coupon-dot-right', 'coupon-dot-right-' + size]"></div>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  .coupon {
    background-image: linear-gradient(to right, $color-primary, darken($color-primary, 5));
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    &-md {
      height: 50px;
      padding: 0 18px;
    }
    &-y {
      font-size: 24px;
      color: #fff;
      font-weight: 100px;
      &-md {
        font-size: 28px;
      }
    }
    &-val {
      margin-left: 0px;
      font-size: 24px;
      color: #fff;
      &-md {
        font-size: 32px;
      }
    }
    &-dot-left, &-dot-right {
      position: absolute;
      display: block;
      content: " ";
      width: 8px;
      height: 8px;
      border-radius: 8px;
      top: 14px;
      background-color: #fff;
      &-md {
        width: 10px;
        height: 10px;
        border-radius: 10px;
        top: 20px
      }
    }
    &-dot-left {
      left: -4px;
    }
    &-dot-right {
      right: -4px;
    }
  }
</style>
<script>

module.exports = {
  props: {
    couponValue: {default: 0},
    size: {default: ''}
  },

  data () {
    return {}
  },
  components: {},
  created () {
  },
  methods: {}
}
</script>
